
<template>
  <el-tooltip class="tooltipTbody" v-bind="$props">
    <div slot="content" v-html="contentShow" />
    <span v-if="showHtml" class="tooltip" v-html="$t(content)" />
    <span v-else class="tooltip">{{ $t(content) }}</span>
  </el-tooltip>
</template>
<script>

export default {
  name: 'ToolTipBreak',
  components: {},
  props: {
    openDelay: {
      type: Number,
      default: 0
    },
    placement: {
      type: String,
      default: 'top'
    },
    disabled: Boolean,
    manual: Boolean,
    effect: {
      type: String,
      default: 'light'
    },
    arrowOffset: {
      type: Number,
      default: 0
    },
    popperClass: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    visibleArrow: {
      type: Boolean,
      default: true
    },
    transition: {
      type: String,
      default: 'el-fade-in-linear'
    },
    popperOptions: {
      type: Function,
      default() {
        return {
          boundariesPadding: 10,
          gpuAcceleration: false
        }
      }
    },
    enterable: {
      type: Boolean,
      default: false
    },
    hideAfter: {
      type: Number,
      default: 0
    },
    tabindex: {
      type: Number,
      default: 0
    },
    showHtml: {
      type: Boolean,
      default: false,
      desc: '是否使用html展示'
    }
  },
  data() {
    return {}
  },
  computed: {
    contentShow: {
      get() {
        return `<div class="tooltip-break">${this.content}</div>`
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.tooltip-break {
  max-width: 300px;
  white-space: break;
  max-height: 400px;
  overflow: auto;
  margin-right: -10px;
  padding-right: 10px;
}
.tooltip {
  width: 100%;
  display: block;
}
</style>
